<template>
	<view>
		<view class="tabnr">
			<view v-for="(item,index) in list" @click="clickTabs(item,index)" :class="{'item':tab==index}"
				v-if="list.length>0">
				<view style="padding: 20rpx;">
					{{item.name}}
				</view>
				<view :class="{'tablis':tab==index}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			tab: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		created() {},
		methods: {
			clickTabs(item, index) {
				// this.tab = index;
				this.$emit("clickTabs", item, index)
			}
		}
	}
</script>

<style>
	.tabnr {
		display: flex;
		justify-content: space-around;
		background-color: rgba(0, 0, 0, 0);
		padding: 10rpx 10rpx 0 10rpx;
		font-size: 30rpx;
	}

	.item {
		font-weight: bold;
		color: #268AF1;
		position: relative;
	}

	.tablis {
		width: 52rpx;
		height: 4rpx;
		background: #268AF1;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
	}
</style>
